<template>
	<view class="nearbyBox">
		<view class="many">
			<text class="title">附近团队</text>
			<text @click="goToMoreTeams">查看更多</text>
		</view>

		<scroll-view :scroll-x="true" style="white-space: nowrap;">
			<template v-for="(item, index) in allTeam">
				<navigator :url="`/homepackge/pages/Teamhomepage/Teamhomepage?teamId=${item._id}`" class="serviceBox"
					hover-class="none">
					<image :src="item.avatar" style="width: 160rpx;height: 160rpx;display: inline-block;">
					</image>
					<view class="TeamName">
						<text>{{ item.name }}</text>
						<text class="adress">{{ item.organizationId?.name }}</text>
						<text class="adress">距您4.9Km</text>
					</view>
				</navigator>
			</template>
		</scroll-view>
	</view>
</template>

<script setup>
import {
	onMounted,
	ref
} from 'vue';
import {
	getTeamApi
} from '../../api/home';

const allTeam = ref([])

onMounted(() => {
	accTeam()
})

async function accTeam() {
	const res = await getTeamApi()
	if (res.code == 200) {
		allTeam.value = res.data.rows
	}
}

// 跳转到查看更多团队页面
const goToMoreTeams = () => {
	uni.navigateTo({
		url: '/homepackge/pages/nearbyLnstitutions/nearbyLnstitutions'
	})
}
</script>

<style scoped lang="scss">
.TeamName {
	position: absolute;
	top: 38rpx;
	right: 20rpx;
	display: inline-block;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	white-space: normal;
	width: 250rpx;
	height: 100%;

	text:first-child {
		font-size: 14px;

		width: 250rpx;
		/* 容器宽度 */
		white-space: nowrap;
		/* 文本不换行 */
		overflow: hidden;
		/* 超出部分隐藏 */
		text-overflow: ellipsis;
		/* 超出部分显示为省略号 */
	}

	// border: 1px solid black;
	// position: absolute;
	// top: 50px;
	.adress {
		font-size: 12px;
		color: #999;
		margin-top: 15rpx;
		// width: 150px;
	}
}

.serviceBox {
	box-shadow: 0.5px 0.5px 0.5px 0.5px #eee;
	position: relative;
	// display: grid;
	// grid-template-columns: 1fr 1fr;
	width: 492rpx;
	height: 228rpx;
	border: 1px solid #f0f0f0;
	display: inline-block;
	margin-right: 30rpx;
	border-radius: 16px;
	margin-bottom: 40rpx;
	margin-top: 40rpx;

	image {
		margin-top: 30rpx;
		margin-left: 30rpx;
	}
}

.nearbyBox {
	margin-top: 20rpx;
	padding: 0 40rpx;
	background: #fff;
	// margin-bottom: 40rpx;

	.title {
		margin-top: 34rpx;
		font-size: 19px;
	}

	.many {
		display: flex;
		justify-content: space-between;

		text:last-child {
			color: #999;
			font-size: 12px;
			margin-top: 50rpx;
		}
	}
}
</style>